<template>
  <div class="talk-list">
    <n-space vertical :size="16">
      <n-card
        v-for="talk in talkList"
        :key="talk.id"
        class="talk-card"
        :class="{ 'talk-card-top': talk.isTop === 1 }"
      >
        <div class="talk-header">
          <div class="user-info">
            <n-avatar
              :src="talk.avatar"
              :fallback-src="'/default-avatar.png'"
              size="medium"
              round
            />
            <div class="user-details">
              <div class="nickname">{{ talk.nickname }}</div>
              <div class="time">{{ formatTime(talk.createTime) }}</div>
            </div>
          </div>
          <div class="talk-actions">
            <n-dropdown
              :options="getTalkOptions(talk)"
              @select="handleTalkAction"
            >
              <n-button quaternary circle size="small">
                <template #icon>
                  <n-icon><EllipsisHorizontalIcon /></n-icon>
                </template>
              </n-button>
            </n-dropdown>
          </div>
        </div>

        <div class="talk-content">
          <div v-if="talk.content" class="talk-text">
            {{ talk.content }}
          </div>

          <!-- 图片网格 -->
          <div v-if="talk.photos && talk.photos.length > 0" class="talk-media">
            <div
              class="media-grid"
              :class="getMediaGridClass(talk.photos.length)"
            >
              <div
                v-for="(photo, index) in talk.photos"
                :key="photo.id"
                class="media-item"
                @click="previewImage(talk.photos, index)"
              >
                <n-image
                  :src="photo.url"
                  :alt="`图片${index + 1}`"
                  object-fit="cover"
                  preview-disabled
                  class="media-image"
                />
              </div>
            </div>
          </div>

          <!-- 位置和天气信息 -->
          <div v-if="talk.address || talk.weather" class="talk-meta">
            <n-space size="small" align="center">
              <n-icon v-if="talk.address" size="14">
                <LocationIcon />
              </n-icon>
              <n-text v-if="talk.address" size="small" depth="3">
                {{ talk.address }}
              </n-text>
              <n-icon v-if="talk.weather" size="14">
                <CloudIcon />
              </n-icon>
              <n-text v-if="talk.weather" size="small" depth="3">
                {{ talk.weather }}
              </n-text>
            </n-space>
          </div>
        </div>

        <div class="talk-footer">
          <n-space justify="space-between" align="center">
            <n-space size="large">
              <n-button
                quaternary
                size="small"
                :class="{ 'liked': talk.isLiked }"
                @click="handleLike(talk)"
              >
                <template #icon>
                  <n-icon>
                    <HeartIcon />
                  </n-icon>
                </template>
                <span>{{ talk.likeCount || 0 }}</span>
              </n-button>

              <n-button
                quaternary
                size="small"
                @click="handleComment(talk)"
              >
                <template #icon>
                  <n-icon><ChatBubbleIcon /></n-icon>
                </template>
                <span>评论</span>
              </n-button>

              <n-button
                quaternary
                size="small"
                @click="handleShare(talk)"
              >
                <template #icon>
                  <n-icon><ShareIcon /></n-icon>
                </template>
                <span>分享</span>
              </n-button>
            </n-space>

            <n-tag v-if="talk.isTop === 1" type="warning" size="small">
              置顶
            </n-tag>
          </n-space>
        </div>
      </n-card>
    </n-space>

    <!-- 图片预览 -->
    <n-image-group>
      <n-image
        v-for="(photo, index) in previewImages"
        :key="index"
        :src="photo.url"
        :alt="`图片${index + 1}`"
        style="display: none;"
      />
    </n-image-group>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue'
import { useMessage } from 'naive-ui'
import dayjs from 'dayjs'
import {
  EllipsisHorizontal as EllipsisHorizontalIcon,
  Location as LocationIcon,
  Cloud as CloudIcon,
  Share as ShareIcon,
  Create as EditIcon,
  Trash as TrashIcon,
  Heart as HeartIcon,
  Chatbubble as ChatBubbleIcon
} from '@vicons/ionicons5'
import type { TalkItem, TalkPhoto } from '@/types/talk'

interface Props {
  talkList: TalkItem[]
}

const props = defineProps<Props>()
const message = useMessage()

// 图片预览相关
const previewImages = ref<TalkPhoto[]>([])

// 格式化时间
const formatTime = (time: string) => {
  const now = dayjs()
  const talkTime = dayjs(time)
  const diffMinutes = now.diff(talkTime, 'minute')

  if (diffMinutes < 1) {
    return '刚刚'
  } else if (diffMinutes < 60) {
    return `${diffMinutes}分钟前`
  } else if (diffMinutes < 1440) {
    return `${Math.floor(diffMinutes / 60)}小时前`
  } else if (diffMinutes < 43200) {
    return `${Math.floor(diffMinutes / 1440)}天前`
  } else {
    return talkTime.format('MM-DD HH:mm')
  }
}

// 获取媒体网格样式类
const getMediaGridClass = (count: number) => {
  if (count === 1) return 'grid-1'
  if (count === 2) return 'grid-2'
  if (count === 3) return 'grid-3'
  if (count === 4) return 'grid-4'
  if (count === 5) return 'grid-5'
  if (count === 6) return 'grid-6'
  if (count === 7) return 'grid-7'
  if (count === 8) return 'grid-8'
  return 'grid-9'
}

// 获取说说操作选项
const getTalkOptions = (talk: TalkItem) => {
  const options = [
    {
      label: '分享',
      key: 'share',
      icon: () => h(ShareIcon)
    }
  ]

  // 如果是自己的说说，添加编辑和删除选项
  if (talk.userId === 1) { // 这里需要根据实际登录用户ID判断
    options.push(
      {
        label: '编辑',
        key: 'edit',
        icon: () => h(EditIcon)
      },
      {
        label: '删除',
        key: 'delete',
        icon: () => h(TrashIcon)
      }
    )
  }

  return options
}

// 处理说说操作
const handleTalkAction = (key: string, talk: TalkItem) => {
  switch (key) {
    case 'share':
      handleShare(talk)
      break
    case 'edit':
      handleEdit(talk)
      break
    case 'delete':
      handleDelete(talk)
      break
  }
}

// 处理点赞
const handleLike = (talk: TalkItem) => {
  // TODO: 调用点赞API
  message.success('点赞功能开发中...')
}

// 处理评论
const handleComment = (talk: TalkItem) => {
  // TODO: 打开评论框
  message.success('评论功能开发中...')
}

// 处理分享
const handleShare = (talk: TalkItem) => {
  // TODO: 实现分享功能
  message.success('分享功能开发中...')
}

// 处理编辑
const handleEdit = (talk: TalkItem) => {
  // TODO: 跳转到编辑页面
  message.success('编辑功能开发中...')
}

// 处理删除
const handleDelete = (talk: TalkItem) => {
  // TODO: 确认删除
  message.success('删除功能开发中...')
}

// 预览图片
const previewImage = (photos: TalkPhoto[], index: number) => {
  previewImages.value = photos
  // 触发图片预览
  const imageElements = document.querySelectorAll('.n-image')
  if (imageElements[index]) {
    ;(imageElements[index] as HTMLElement).click()
  }
}
</script>

<style scoped>
.talk-list {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
}

.talk-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.talk-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.talk-card-top {
  border-left: 4px solid #ff6b35;
}

.talk-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nickname {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
}

.talk-content {
  margin-bottom: 16px;
}

.talk-text {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  word-wrap: break-word;
}

.talk-media {
  margin-bottom: 12px;
}

.media-grid {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  overflow: hidden;
}

.grid-1 {
  grid-template-columns: 1fr;
}

.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-5 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-6 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-7 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.grid-8 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.grid-9 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.media-item {
  aspect-ratio: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.media-item:hover {
  opacity: 0.8;
}

.media-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.talk-meta {
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
}

.talk-footer {
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.liked {
  color: #ff4757;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .talk-list {
    padding: 8px;
  }

  .talk-card {
    border-radius: 8px;
  }

  .nickname {
    font-size: 15px;
  }

  .talk-text {
    font-size: 14px;
  }
}
</style>
